<template>
  <div class="question">
    <el-container>
      <el-header>
        客服
        <el-main class="scroll">
          <div v-for="msg in msgs" :key="msg">
            <MessageLeft
              v-if="!msg.type"
              :avatarUrl="
                msg.avatar ||
                'https://fs-km.7moor.com/N00000000011/km/2020-06-22/1592829287411/c2252b40-b484-11ea-9d54-ad9fefd8e82d?imageView2/1/w/50/h/50'
              "
              :nickname="msg.nickname"
              :msg="msg.msg"
              :time="msg.time"
            />
            <MessageRight
              v-if="msg.type"
              :avatarUrl="
                msg.avatar ||
                'https://fs-km.7moor.com/N00000000011/km/2020-06-22/1592829287411/c2252b40-b484-11ea-9d54-ad9fefd8e82d?imageView2/1/w/50/h/50'
              "
              :nickname="msg.nickname"
              :msg="msg.msg"
              :time="msg.time"
            />
          </div>
          <!-- <MessageLeft
            v-for="i in 1"
            :key="i"
            avatarUrl="https://fs-km.7moor.com/N00000000011/km/2020-06-22/1592829287411/c2252b40-b484-11ea-9d54-ad9fefd8e82d?imageView2/1/w/50/h/50"
            nickname="的搭嘎让国人"
            msg="s这是客服页面标题 .g这是客服页面标题 .weg这是客服页面标题 ."
            time="11:01:15"
          />
          <MessageRight
            v-for="msg in [...msgs, ...msgs, ...msgs]"
            :key="msg"
            :avatarUrl="
              msg.avatar ||
              'https://fs-km.7moor.com/N00000000011/km/2020-06-22/1592829287411/c2252b40-b484-11ea-9d54-ad9fefd8e82d?imageView2/1/w/50/h/50'
            "
            :nickname="msg.nickname"
            :msg="msg.msg"
          /> -->
        </el-main>
        <el-footer>
          <el-row style="margin-bottom: 5px">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 3 }"
              placeholder="请输入内容（Ctrl+Enter发送）"
              v-model="sendMsg"
              @keydown.enter.native="keyDown"
              style="font-size: large"
            >
            </el-input>
          </el-row>
          <el-row type="flex" justify="end">
            <el-col :span="6">
              <el-button round type="info" @click="sengMsgFn" style="padding:3px 10px 3px 10px;font-size: large"
                >发送</el-button
              ></el-col
            >
          </el-row>
        </el-footer>
      </el-header>
    </el-container>
  </div>
</template>
<script>
import MessageLeft from "@/components/Message/MessageLeft.vue";
import MessageRight from "@/components/Message/MessageRight.vue";
export default {
  components: { MessageLeft, MessageRight },
  data() {
    return {
      sendMsg: "",
      msgs: [
        {
          type: 0,
          avatar: "",
          nickname: "智能客服",
          msg: "我是你的智能客服，有什么问题可以直接问我哦，需要人工客服请对我说“转人工”。",
          time: "",
        },
      ],
    };
  },
  methods: {
    keyDown(e) {
      if (e.ctrlKey && e.keyCode == 13) {
        //用户点击了ctrl+enter触发
        this.sengMsgFn()
      } else {
        //用户点击了enter触发
      }
    },
    sengMsgFn() {
      if (this.sendMsg == "") {
        return;
      }
      let user = JSON.parse(localStorage.getItem("user"));
      console.log(user);
      let sendMsg = this.sendMsg;
      let sendingMsg = {
        type: 1,
        avatar: user.avatar,
        nickname: user.nickname,
        msg: sendMsg,
        time: new Date().toLocaleTimeString("chinese", { hour12: false }),
      };
      this.msgs.push(sendingMsg);
      this.sendMsg = "";
      this.getMsgReply(user.username, sendMsg);
    },
    getMsgReply(userid, msg) {
      this.$axios({
        method: "post",
        url: "/tuling",
        data: {
          reqType: 0,
          perception: {
            inputText: {
              text: msg,
            },
          },
          userInfo: {
            apiKey: "",
            userId: userid,
          },
        },
      }).then((res) => {
        console.log(res);
        if (res.data.intent.code == 10004) {
          let replyMsg = {
            type: 0,
            avatar: "",
            nickname: "",
            msg: res.data.results[0].values.text,
            time: new Date().toLocaleTimeString("chinese", { hour12: false }),
          };
          this.msgs.push(replyMsg);
        }
      });
    },
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.scroll {
  overflow-y: scroll;
  height: 400px;
}
.service-name-right {
  display: block !important;
  text-align: right;
}
.service {
  padding: 7px;
  width: fit-content;
  float: right;
}
.service p {
  text-align: left;
  width: fit-content;
}
.el-row {
  margin: 0 5px 20px 5px;
}
.user-avatar img {
  width: 40px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
<style scoped>
.chatmsg {
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
li {
  list-style-type: none;
}
body,
h1,
h2,
h3,
h4,
html,
img,
li,
p,
pre,
ul {
  margin: 0;
  padding: 0;
  border: 0;
}
* {
  scrollbar-face-color: #bbb;
  scrollbar-arrow-color: #bbb;
  scrollbar-3dlight-color: silver;
  scrollbar-highlight-color: #bbb;
  scrollbar-shadow-color: #bbb;
  scrollbar-darkshadow-color: silver;
  scrollbar-track-color: #eee;
}
user agent stylesheet li {
  display: list-item;
  text-align: -webkit-match-parent;
}
.conversation {
  list-style: none;
  padding: 12px;
}
ul {
  list-style: none;
}
user agent stylesheet ul {
  list-style-type: disc;
}
body {
  background: #fff;
  -webkit-text-size-adjust: none;
}
body,
button,
html,
input,
pre,
textarea {
  font-family: "Helvetica Neue", Helvetica, "Microsoft Yahei", Arial, sans-serif;
}
.chatmsg p,
.chatmsg:after {
  content: "";
  display: table;
  clear: both;
  word-break: break-word;
}
::-webkit-resizer {
  background-repeat: no-repeat;
  background-position: bottom right;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-corner {
  background-color: #f3f3f3;
}
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border: solid 1px silver;
  border-radius: 3px;
}
::-webkit-scrollbar-track {
  background-color: #ddd;
}
::-webkit-scrollbar-track-piece {
  background-color: #fff;
}
::-webkit-scrollbar-track-piece {
  background-color: #f3f3f3;
  -webkit-border-radius: 3px;
}
</style>